<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/common.css">
<style>
    #groupIndex {
        background: #fff;
        padding: 0 20px 30px;
    }

    .status-normal {
        color: #6ACAA5;
    }

    .status-hidden {
        color: #C4C4C4;
    }

    [v-cloak] {
        display: none
    }
</style>

<script src="__CDN__/assets/addons/vuemagic/vue.js"></script>
<script src="__CDN__/assets/addons/vuemagic/element/element.js"></script>
<script src="__CDN__/assets/addons/vuemagic/moment.js"></script>
<div id="htmlIndex" v-cloak>
    <div class="screen-container">
        <div class="screen-container-show">
            <!--顶部选项卡一般status-->
            <div class="screen-container-left display-flex">
                <div class="order-refresh display-flex" @click="reqOrderList">
                    <i class="el-icon-refresh"></i>
                </div>
                <el-radio-group v-model="searchForm.status" @change="reqOrderList(0,10)">
                    <el-radio-button label="all">全部</el-radio-button>

                </el-radio-group>

            </div>
            <!--顶部选项卡一般status 结束-->
            <!--自动展开的搜索列表-->
            <div class="screen-container-right display-flex">
                <div class="display-flex margin-right-20">
                    <div class="color-666 order-time">{:__("jointime")}</div>
                    <el-date-picker v-model="searchForm.jointime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="reqOrderList(0,10)" :picker-options="pickerOptions" align="right"
                                    size="small"
                                    :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </div>

<!--                <el-button type="primary" size="small" @click="baseAction('create',null)"><i class="el-icon-plus"></i>-->
<!--                    新建会员管理-->
<!--                </el-button>-->
                <template v-if="searchForm.status == 'nosend'">
                    <!--可以修改此处逻辑用来安置自定义按钮-->
                    <div class="common-btn cursor-pointer screen-button" @click="test">演示按钮</div>
                </template>
                <div :class="screenType?'arrow-open':'arrow-close'" @click="changeSwitch">
                    <div class="arrow-container">
                        <i class="el-icon-arrow-down"></i>
                    </div>
                </div>
            </div>
        </div>
        <!--自动展开的搜索列表结束-->

        <!--需要手动点击展开的搜索-->
        <el-collapse-transition>
            <div class="screen-con" v-if="screenType">
                <!--除图片、文件、权重外所有设置在列表展示的字段都会自动生成到搜索栏-->
                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Id')}</div>
                    <el-input placeholder="请输入{:__('Id')}" v-model="searchForm.id" size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('Username')}</div>
                    <el-input placeholder="请输入{:__('Username')}" v-model="searchForm.username"
                              size="small"></el-input>
                </div>



                <div class="display-flex header-select-item">
                    <div class="header-input-tip">{:__('Birthday')}</div>
                    <el-date-picker v-model="searchForm.birthday" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
                                    format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="reqOrderList(0,10)" :picker-options="pickerOptions" align="right"
                                    size="small"
                                    :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('籍贯')}</div>
                    <el-input placeholder="请输入{:__('籍贯')}" v-model="searchForm.native_place"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('现住址')}</div>
                    <el-input placeholder="请输入{:__('现住址')}" v-model="searchForm.address" size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('工作单位')}</div>
                    <el-input placeholder="请输入{:__('工作单位')}" v-model="searchForm.work_unit"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('单位联系人')}</div>
                    <el-input placeholder="请输入{:__('单位联系人')}" v-model="searchForm.linkman" size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('联系电话')}</div>
                    <el-input placeholder="请输入{:__('联系电话')}" v-model="searchForm.linkman_phone"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('工种')}</div>
                    <el-input placeholder="请输入{:__('工种')}" v-model="searchForm.work_type"
                              size="small"></el-input>
                </div>

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('身份证号')}</div>
                    <el-input placeholder="请输入{:__('身份证号')}" v-model="searchForm.id_card" size="small"></el-input>
                </div>

<!--                <div class="display-flex header-input-item">-->
<!--                    <div class="header-input-tip">{:__('Id_card_front')}</div>-->
<!--                    <el-input placeholder="请输入{:__('Id_card_front')}" v-model="searchForm.id_card_front"-->
<!--                              size="small"></el-input>-->
<!--                </div>-->

<!--                <div class="display-flex header-input-item">-->
<!--                    <div class="header-input-tip">{:__('Id_card_back')}</div>-->
<!--                    <el-input placeholder="请输入{:__('Id_card_back')}" v-model="searchForm.id_card_back"-->
<!--                              size="small"></el-input>-->
<!--                </div>-->

<!--                <div class="display-flex header-input-item">-->
<!--                    <div class="header-input-tip">{:__('Education')}</div>-->
<!--                    <el-input placeholder="请输入{:__('Education')}" v-model="searchForm.education"-->
<!--                              size="small"></el-input>-->
<!--                </div>-->

                <div class="display-flex header-input-item">
                    <div class="header-input-tip">{:__('年龄')}</div>
                    <el-input placeholder="请输入{:__('Age')}" v-model="searchForm.age" size="small"></el-input>
                </div>
                <!--搜索栏字段结束-->
                <div class="header-button-item display-flex">
                    <div class="common-btn" @click="screenEmpty">重置</div>
                    <div class="common-btn header-button-select" @click="reqOrderList(0,10)">筛选</div>
                </div>
            </div>
        </el-collapse-transition>
        <!--需要手动点击展开的搜索结束-->
    </div>
    <div class="custom-table ">
        <div v-loading="tableAjax">
            <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
                      :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
                      :header-cell-class-name="tableCellClassName" @row-dblclick="baseAction" @sort-change="sortChange">
                <el-table-column min-width="100" label="{:__('Id')}" sortable="custom" prop="id">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.id" placement="top">
                                <el-text>{{scope.row.id}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Username')}" prop="username">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.username" placement="top">
                                <el-text>{{scope.row.username ? scope.row.username.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('一寸照')}" prop="id_card_front">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.one_inch_photo" placement="top">
                                <el-image
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.one_inch_photo"
                                        :preview-src-list="[scope.row.one_inch_photo]"
                                >
                                </el-image>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" label="{:__('年龄')}" sortable="custom" prop="age">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.age" placement="top">
                                <el-text>{{scope.row.age}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
<!--                <el-table-column min-width="100" label="{:__('Password')}" prop="password">-->
<!--                    <template slot-scope="scope">-->
<!--                        <div class="ellipsis-item">-->
<!--                            <el-tooltip class="item" effect="light" :content="scope.row.password" placement="top">-->
<!--                                <el-text>{{scope.row.password ? scope.row.password.substr(0, 18) : "-"}}</el-text>-->
<!--                            </el-tooltip>-->
<!--                        </div>-->
<!--                    </template>-->
<!--                </el-table-column>-->

                <el-table-column min-width="100" label="{:__('Mobile')}" prop="mobile">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.mobile" placement="top">
                                <el-text>{{scope.row.mobile ? scope.row.mobile.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="{:__('Avatar')}" min-width="100" prop="avatar">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-image :src="Fast.api.cdnurl(scope.row.avatar.split(',')[0])" style="height:30px"
                                      v-if="scope.row.avatar" fit="contain"
                                      :preview-src-list="scope.row.avatar.split(',')">
                                <div slot="error" class="image-slot"><i class="el-icon-picture-outline"></i></div>
                            </el-image>
                            <span v-if="!scope.row.avatar">暂未上传</span></div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Gender')}" sortable="custom" prop="gender">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.gender" placement="top">
                                <el-text>{{scope.row.gender == 0 ? "女" : "男"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('Birthday')}" sortable="custom" prop="birthday">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.birthday" placement="top">
                                <el-text>{{scope.row.birthday}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('籍贯')}" prop="native_place">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.native_place" placement="top">
                                <el-text>{{scope.row.native_place ? scope.row.native_place.substr(0, 18) : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('现住址')}" prop="address">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.address" placement="top">
                                <el-text>{{scope.row.address ? scope.row.address.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('工作单位')}" prop="work_unit">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.work_unit" placement="top">
                                <el-text>{{scope.row.work_unit ? scope.row.work_unit.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('单位联系人')}" prop="linkman">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.linkman" placement="top">
                                <el-text>{{scope.row.linkman ? scope.row.linkman.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('联系电话')}" prop="linkman_phone">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.linkman_phone" placement="top">
                                <el-text>{{scope.row.linkman_phone ? scope.row.linkman_phone.substr(0, 18) : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('工种')}" sortable="custom" prop="work_type">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.type.name" placement="top">
                                <el-text>{{scope.row.type.name ? scope.row.type.name: "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('负责人')}" prop="type.director">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.work_type"
                                        placement="top">
                                <el-text>
                                    {{scope.row.work_type ? scope.row.type.directors.username : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('安全管理人')}" prop="type.manager">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.work_type"
                                        placement="top">
                                <el-text>{{scope.row.work_type ? scope.row.type.managers.username : "-"}}
                                </el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column min-width="100" label="{:__('身份证号')}" prop="id_card">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.id_card" placement="top">
                                <el-text>{{scope.row.id_card ? scope.row.id_card.substr(0, 18) : "-"}}</el-text>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="{:__('身份证国徽面')}" min-width="100" prop="id_card_front">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.id_card_front" placement="top">
                                <el-image
                                        v-if="scope.row.id_card_front"
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.id_card_front"
                                        :preview-src-list="[scope.row.id_card_front]"
                                >
                                </el-image>
                                <span v-else>暂未上传</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="{:__('身份证人像面')}" min-width="100" prop="id_card_back">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.id_card_back" placement="top">
                                <el-image
                                        v-if="scope.row.id_card_back"
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.id_card_back"
                                        :preview-src-list="[scope.row.id_card_back]"
                                >
                                </el-image>
                                <span v-else>暂未上传</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="{:__('学历证明')}" min-width="100" prop="education">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            <el-tooltip class="item" effect="light" :content="scope.row.education" placement="top">
                                <el-image
                                        v-if="scope.row.education"
                                        fit="contain"
                                        style="width: 100px; height: 50px"
                                        :src="scope.row.education"
                                        :preview-src-list="[scope.row.education]"
                                >
                                </el-image>
                                <span v-else>暂未上传</span>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>


                <el-table-column label="操作" min-width="130" fixed="right">
                    <template slot-scope="scope">
                        <div>
                            {if condition = "$auth->check('users/user/edit')"}
                            <span class="table-edit-text" @click="baseAction('edit',scope.row.id)">编辑</span>
                            {/if}
<!--                            {if condition = "$auth->check('users/user/del')"}-->
<!--                            <span class="table-delete-text" @click="baseAction('del',scope.row.id)">删除</span>-->
<!--                            {/if}-->
<!--                            <span class="table-edit-text" @click="baseAction('edit',scope.row.id)">导出</span>-->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[10, 20, 50, 100,200,500,1000]" :page-size="limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>
</div>